<div id="dialog" title="BUSCAR PACIENTE">
    <center>


<form id="FormBuscarPaciente" name="FormBuscarPaciente" action="<?php echo url_for('buscarpaciente/filtrar'); ?>" method="post">
<table>
 <tbody>
  <?php echo $filtro; ?>
 </tbody>
</table>

<div id="div_boton">
<input type="submit" value="  BUSCAR  " id="boton_filtrar" name="boton_filtrar"/>
</div>

<div id="ajax_loader">
    <?php echo image_tag('/images/loader.gif', array("style" => "display: none","id" =>"loader_gif")); ?>
</div>

</form>


<div id="ResultadoBuscarPaciente">
</div>


    </center>
</div>


<script type="text/javascript">

        // esperamos que el DOM cargue
        $(document).ready(function() {
            // definimos las opciones del plugin AJAX FORM
            var opciones= {
                               beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#FormBuscarPaciente').ajaxForm(opciones) ;



             //lugar donde defino las funciones que utilizo dentro de "opciones"
             function mostrarLoader(){
                          $("#boton_filtrar").hide();
                          $("#loader_gif").show(); //muestro el loader de ajax
             };

             function mostrarRespuesta (responseText){
                          $("#loader_gif").hide();
                          $("#boton_filtrar").show();
                          $("#ResultadoBuscarPaciente").html(responseText + "<br/>");
             };
        });

</script>



<script type="text/javascript">

    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog" ).dialog({
            height: 400,
            width: 700,
            resizable: false,
            modal: true
        });
    });

</script>
